<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title>隐患</title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link rel="stylesheet" href="css/mui.min.css">
	<link rel="stylesheet" type="text/css" href="css/app.css" />
	<link rel="stylesheet" type="text/css" href="css/mui.picker.min.css" />
	<link rel="stylesheet" type="text/css" href="css/form.css">
	<link  rel="stylesheet" type="text/css"  href="css/webuploader.css"/>
	<link  rel="stylesheet" type="text/css"  href="libs/ztree/zTreeStyle.css"/>
	<link  rel="stylesheet" type="text/css"  href="libs/ztree/treeSelect.css"/>
	<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet" />
</head>
<body class="up_body">
	<div class="mui-content up_form_content">
		<!--表单start-->
		<form class="mui-input-group up_group">
			<div class="up_row">
				<label><font>* </font>填报单位</label>
				<input type="text" value="太原化工厂" name="" readonly>
				<div class="clear_both"></div>
			</div>
			<!--灰色底介绍start-->
			<div class="up_gray_name">单位名称</div>
			<!--灰色底介绍end-->
			<div class="up_row">
				<label><font>* </font>填&nbsp;&nbsp;报&nbsp;&nbsp;人：</label>
				<input type="text" value="姜俊杰">
				<div class="clear_both"></div>
			</div>
			<div class="up_gray"></div>
			<div class="up_row">
				<label><font>* </font>隐患描述</label>
				<div class="clear_both"></div>
				<textarea  rows="5" placeholder="请输入隐患内容" name="HDName"></textarea>
				<div class="clear_both"></div>
			</div>
			<div class="up_gray"></div>
			<div class="up_row">
				<label><font>* </font>发现时间</label>
				<input type="text" class="date-select icon_more" placeholder="请选择时间" name="FindDate"  readonly>
				<div class="clear_both"></div>
			</div>
			<div class="up_row record-select" data='[{"value": "ywj","text": "一般隐患"},{"value": "aaa","text": "重大隐患"},{"value": "222","text": "特大隐患"}]'>
				<label><font>* </font>隐串类别</label>
				<input type="text" class="record-select-data icon_more" placeholder="请选择" name="HIHiddenDangerType" 
				 readonly>
				<icon class="icon_more fright"></icon>
				<div class="clear_both"></div>
			</div>
			<div class="up_row record-two-select" data='[{"value":"1","text":"北京","children":[{"value":"110101","text": "东城区"},{"value":"110102","text": "西城区"}]},{"value":"1","text":"天津市","children":[{"value": "110101","text": "东城区"}, {"value": "110102","text": "西城区"}]}]'>
				<label><font>* </font>隐串级别</label>
				<input type="text" class="record-two-select-data icon_more" placeholder="请选择" name="HIHiddenDangerLevel" 
				 readonly>
				<icon class="icon_more fright"></icon>
				<div class="clear_both"></div>
			</div>
			<!--<div class="up_row">
                <label>整改类型：</label>
                <input type="text" placeholder="请选择" name="" readonly>
                <icon class="icon_more fright"></icon>
                <div class="clear_both"></div>
            </div>-->
			<div class="up_row">
				<label><font>* </font>整改期限</label>
				<input type="text" class="date-select icon_more" placeholder="请选择时间" name="DeadLine"  readonly>
				<icon class="icon_more fright"></icon>
				<div class="clear_both"></div>
			</div>
			<div class="up_gray"></div>
			<div class="up_row">
				<label><font></font>整改要求</label>
				<textarea  rows="5" name="RectificationRequest" placeholder="请输入整改要求"></textarea>
				<div class="clear_both"></div>
			</div>
			<div class="up_gray"></div>
			<div class="up_row record-select">
				<label><font>* </font>责任单位</label>
				<input type="text" class="record-select-data icon_more" placeholder="请选择" name="HIHiddenDangerType"  readonly />
				<icon class="icon_more fright"></icon>
				<div class="clear_both"></div>
			</div>
			<div class="up_row">
				<label><font>* </font>责任单位</label>
				<div class="treeSelect"></div>
				<icon class="icon_more fright"></icon>
				<div class="clear_both"></div>
			</div>
			<div class="up_gray"></div>
			<div id="filePicker" class="up_file_img"></div>  
			<div class="mui-input-row up_row up_file_list up_fileimg_list">
				<input name="" type="hidden" id="imageIds">
				<label><font>* </font>上传图片</label>
				<div class="clear_both"></div>
				<div class="up_fileimg_right">
					<!--<div class="up_file"></div>
					-- <input   class="up_file" > -->
					<div id="preview"></div>
					<div class="clear_both"></div>
					<div></div>
				</div>
				<div class="clear_both"></div>
			</div>
			<div class="mui-input-row up_row up_file_list" >
				<label><font>* </font>上传附件</label>
				<div class="up_file_right">
					<input type="file"  class="up_file" multiple capture='camera' accept='image/*'>
					<div class="clear_both"></div>
					<div class="up_file_fj"></div>
					<div></div>
				</div>
				<div class="clear_both"></div>
			</div>
			<div class="mui-input-row up_row up_file_list">
				<label><font>* </font>人员选择</label>
				<div class="up_file_right">
					<select class="form-control">
						<option value="">--请选择开发语言--</option>
						<option value="Java">Java</option>
						<option value="PHP">PHP</option>
						<option value=".NET">.NET</option>
					</select>
				</div>
				<div class="clear_both"></div>
				<!--<div class="up_photo_name">
					<div class="up_photo_lna">
						<span class="close_two"></span>
						<font>俊雄</font>
					</div>
					<div class="up_photo_lna">
						<span class="close_two"></span>
						<font>俊雄</font>
					</div>
					<div class="up_photo_lna">
						<span class="close_two"></span>
						<font>俊雄</font>
					</div>
					<div class="up_photo_lna">
						<span class="close_two"></span>
						<font>俊雄</font>
					</div>
					<div class="up_photo_lna">
						<span class="close_two"></span>
						<font>俊雄</font>
					</div>
					<div class="up_photo_lna">
						<span class="close_two"></span>
						<font>俊雄</font>
					</div>
					<div class="up_photo_lna">
						<span class="close_two"></span>
						<font>俊雄</font>
					</div>
					<div class="clear_both"></div>
				</div>-->
			</div>
			<div class="up_gray"></div>
			<ul class="mui-table-view up_open">
				<li class="mui-table-view-cell">
					<font class="up_bt">* </font><span></span>
					<div class="mui-switch mui-switch-mini mui-active ">
						<div class="mui-switch-handle"></div>
					</div>
				</li>
			</ul>
			<div class="up_gray"></div>
			<!--上传图片start--
			<div class="up_row up_file_list">
				<label><font>* </font>上传图片：</label>
				<div class="clear_both"></div>
				<div class="up_file_right">
					<div ></div>
					<input type="file"  class="up_file" multiple capture='camera' accept='image/*'>
					<div class="up_file_img"></div>
				</div>
				<div class="clear_both"></div>
			</div>
			上传图片end-->
		</form>
		<!--表单end-->
		<div class="up_button">
			<input type="button" id="submit" class="up_button_left" value="提交" />
			<input type="button" class="up_button_right" value="保存" />
			<div class="clear_both"></div>
		</div>
	</div>
</body>
<script src="js/mui.min.js"></script>
<script src="js/jquery.js"></script>
<script src="js/mui.picker.min.js"></script>
<script src="js/form.js"></script>
<script src="js/webuploader.js"></script>
<script src="libs/ztree/jquery.ztree.all.min.js"></script>
<script src="libs/ztree/treeSelect.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script>

<script>
	$(function () {
		var data = [{"name":"哈尔滨铁路局","pId":0,"id":86,"type":"0"},{"name":"哈尔滨机务段","pId":86,"id":85,"type":"1"},{"name":"齐齐哈尔机务段","pId":86,"id":84,"type":"1"},{"name":"牡丹江机务段","pId":86,"id":83,"type":"1"},{"name":"佳木斯机务段","pId":86,"id":82,"type":"1"},{"name":"三棵树机务段","pId":86,"id":81,"type":"1"},{"name":"沈阳铁路局","pId":0,"id":80,"type":"0"},{"name":"沈阳机务段","pId":80,"id":79,"type":"1"},{"name":"苏家屯机务段","pId":80,"id":78,"type":"1"},{"name":"锦州机务段","pId":80,"id":77,"type":"1"},{"name":"吉林机务段","pId":80,"id":76,"type":"1"},{"name":"通辽机务段","pId":80,"id":75,"type":"1"},{"name":"白城机务段","pId":80,"id":74,"type":"1"},{"name":"梅河口机务段","pId":80,"id":73,"type":"1"},{"name":"大连机务段","pId":80,"id":72,"type":"1"},{"name":"呼和浩特铁路局","pId":0,"id":71,"type":"0"},{"name":"包头西机务段","pId":71,"id":70,"type":"1"},{"name":"集宁机务段","pId":71,"id":69,"type":"1"},{"name":"北京铁路局","pId":0,"id":68,"type":"0"},{"name":"怀柔北机务段","pId":68,"id":67,"type":"1"},{"name":"北京机务段","pId":68,"id":66,"type":"1"},{"name":"丰台机务段","pId":68,"id":65,"type":"1"},{"name":"天津机务段","pId":68,"id":64,"type":"1"},{"name":"唐山机务段","pId":68,"id":63,"type":"1"},{"name":"石家庄电力机务段","pId":68,"id":62,"type":"1"},{"name":"邯郸机务段","pId":68,"id":61,"type":"1"},{"name":"太原铁路局","pId":0,"id":60,"type":"0"},{"name":"太原机务段","pId":60,"id":59,"type":"1"},{"name":"湖东电力机务段","pId":60,"id":58,"type":"1"},{"name":"侯马北电力机务段","pId":60,"id":57,"type":"1"},{"name":"济南铁路局","pId":0,"id":56,"type":"0"},{"name":"济南机务段","pId":56,"id":55,"type":"1"},{"name":"济南西机务段","pId":56,"id":54,"type":"1"},{"name":"青岛机务段","pId":56,"id":53,"type":"1"},{"name":"郑州铁路局","pId":0,"id":52,"type":"0"},{"name":"郑州机务段","pId":52,"id":51,"type":"1"},{"name":"新乡机务段","pId":52,"id":50,"type":"1"},{"name":"洛阳机务段","pId":52,"id":49,"type":"1"},{"name":"上海铁路局","pId":0,"id":48,"type":"0"},{"name":"上海机务段","pId":48,"id":47,"type":"1"},{"name":"南京东机务段","pId":48,"id":46,"type":"1"},{"name":"杭州机务段","pId":48,"id":45,"type":"1"},{"name":"合肥机务段","pId":48,"id":44,"type":"1"},{"name":"徐州机务段","pId":48,"id":43,"type":"1"},{"name":"武汉铁路局","pId":0,"id":42,"type":"0"},{"name":"武昌南机务段","pId":42,"id":41,"type":"1"},{"name":"江岸机务段","pId":42,"id":40,"type":"1"},{"name":"襄阳机务段","pId":42,"id":39,"type":"1"},{"name":"西安铁路局","pId":0,"id":38,"type":"0"},{"name":"西安机务段","pId":38,"id":37,"type":"1"},{"name":"新丰镇机务段","pId":38,"id":36,"type":"1"},{"name":"安康机务段","pId":38,"id":35,"type":"1"},{"name":"乌鲁木齐铁路局","pId":0,"id":34,"type":"0"},{"name":"乌鲁木齐机务段","pId":34,"id":33,"type":"1"},{"name":"库尔勒机务段","pId":34,"id":32,"type":"1"},{"name":"哈密机务段","pId":34,"id":31,"type":"1"},{"name":"南昌铁路局","pId":0,"id":30,"type":"0"},{"name":"南昌机务段","pId":30,"id":29,"type":"1"},{"name":"福州机务段","pId":30,"id":28,"type":"1"},{"name":"向塘机务段","pId":30,"id":27,"type":"1"},{"name":"鹰潭机务段","pId":30,"id":26,"type":"1"},{"name":"成都铁路局","pId":0,"id":25,"type":"0"},{"name":"重庆机务段","pId":25,"id":24,"type":"1"},{"name":"贵阳机务段","pId":25,"id":23,"type":"1"},{"name":"西昌机务段","pId":25,"id":22,"type":"1"},{"name":"成都机务段","pId":25,"id":21,"type":"1"},{"name":"兰州铁路局","pId":0,"id":20,"type":"0"},{"name":"兰州西机务段","pId":20,"id":19,"type":"1"},{"name":"嘉峪关机务段","pId":20,"id":18,"type":"1"},{"name":"迎水桥机务段","pId":20,"id":17,"type":"1"},{"name":"南宁铁路局","pId":0,"id":16,"type":"0"},{"name":"南宁机务段","pId":16,"id":15,"type":"1"},{"name":"柳州机务段","pId":16,"id":14,"type":"1"},{"name":"昆明铁路局","pId":0,"id":13,"type":"0"},{"name":"昆明机务段","pId":13,"id":12,"type":"1"},{"name":"开远机务段","pId":13,"id":11,"type":"1"},{"name":"广州铁路集团公司","pId":0,"id":10,"type":"0"},{"name":"广州机务段","pId":10,"id":9,"type":"1"},{"name":"长沙机务段","pId":10,"id":8,"type":"1"},{"name":"株洲机务段","pId":10,"id":7,"type":"1"},{"name":"怀化机务段","pId":10,"id":6,"type":"1"},{"name":"龙川机务段","pId":10,"id":5,"type":"1"},{"name":"海口机务段","pId":10,"id":4,"type":"1"},{"name":"青藏铁路公司","pId":0,"id":3,"type":"0"},{"name":"西宁机务段","pId":3,"id":2,"type":"1"},{"name":"格尔木机务段","pId":3,"id":1,"type":"1"},{"name":"HXD3C0668","pId":84,"id":1,"type":"2"},{"name":"test1","pId":85,"id":7,"type":"2"}]
		$('.treeSelect').treeSelect({
			data:data,
			inputName:'namename'
		});
        $('.form-control').select2();
	});


	// 初始化Web Uploader
	var uploader = WebUploader.create({

	    // 选完文件后，是否自动上传。
	    auto: true,

	    // swf文件路径
	    //swf: BASE_URL + '/js/Uploader.swf',

	    // 文件接收服务端。
	    server: 'http://webuploader.duapp.com/server/fileupload.php',
		//server: 'http://39.104.15.31:8066/public/UpoladFiles',
	    // 选择文件的按钮。可选。
	    // 内部根据当前运行是创建，可能是input元素，也可能是flash.
	    pick: '#filePicker',

	    // 只允许选择图片文件。
	    accept: {
	        title: 'Images',
	        extensions: 'gif,jpg,jpeg,bmp,png',
	        mimeTypes: 'image/*'
	    }
	});
	// 当有文件添加进来的时候
	uploader.on( 'fileQueued', function( file ) {
	    var $li = $(
	            '<div id="' + file.id + '" class="file-item thumbnail">' +
					'<span class="file_close"></span>' + 
	                '<img>' +
	            '</div>'
	            ),
	        $img = $li.find('img');
	
	    // $list为容器jQuery实例
	    $("#preview").append( $li );
	    // 创建缩略图
	    // 如果为非图片文件，可以不用调用此方法。
	    // thumbnailWidth x thumbnailHeight 为 100 x 100
	    uploader.makeThumb( file, function( error, src ) {
	        if ( error ) {
	            $img.replaceWith('<img src="11">');
	            return; 
	        }
	        $img.attr( 'src', src );
	    }, 70, 70 );
	});
	// 文件上传过程中创建进度条实时显示。
	uploader.on( 'uploadProgress', function( file, percentage ) {
	    var $li = $( '#'+file.id ),
	        $percent = $li.find('.progress span');

	    // 避免重复创建
	    if ( !$percent.length ) {
	        $percent = $('<p class="progress"><span></span></p>')
	                .appendTo( $li )
	                .find('span');
	    }
	    $percent.css( 'width', percentage * 100 + '%' );
	});

	// 文件上传成功，给item添加成功class, 用样式标记上传成功。
	uploader.on( 'uploadSuccess', function( file,response ) {
	    var $li = $( '#'+file.id ),
	        $error = $li.find('div.error');

	    // 避免重复创建
	    if ( !$error.length ) {
	        $error = $('<div class="success"></div>').appendTo( $li );
	    }
	    $error.text('上传成功');
		console.log(response);
		var imageId = response[0].attachmentId;
		$("#"+file.id).attr("data",imageId);
		var imageIds =  $("#imageIds").val();
		if(imageIds==null || imageIds == ""){
			$("#imageIds").val(imageId);
		}else{
			$("#imageIds").val(imageIds+","+imageId);
		}
	});
	
	// 文件上传失败，显示上传出错。
	uploader.on( 'uploadError', function( file ) {
	    var $li = $( '#'+file.id ),
	        $error = $li.find('div.error');

	    // 避免重复创建
	    if ( !$error.length ) {
	        $error = $('<div class="error"></div>').appendTo( $li );
	    }

	    $error.text('上传失败');
	});
	
	// 完成上传完了，成功或者失败，先删除进度条。
	uploader.on( 'uploadComplete', function( file ) {
	    $( '#'+file.id ).find('.progress').remove();
	});
	$(document).on("click",".file_close",function(){
		var fileDiv = $(this).parent();
		var fileId = fileDiv.attr("id");
		var imageIds = $("#imageIds").val();
		imageIds = imageIds.replace(fileDiv.attr("data"),"").replace(",,",",");
		if(imageIds.charAt(0) == ","){
			imageIds = imageIds.substr(1);
		}
		if(imageIds.charAt(imageIds.length-1) == ","){
			imageIds = imageIds.substr(0,imageIds.length-1);
		}
		$("#imageIds").val(imageIds)
		fileDiv.remove();
		uploader.removeFile(fileId);
	})
	mui.init({
		swipeBack:true //启用右滑关闭功能
	});
	mui('.mui-content .mui-switch').each(function() { //循环所有toggle
		//toggle.classList.contains('mui-active') 可识别该toggle的开关状态
		this.parentNode.querySelector('span').innerText = '开关' + (this.classList.contains('mui-active') ? '' : '');
		this.addEventListener('toggle', function(event) {
			//event.detail.isActive 可直接获取当前状态
			this.parentNode.querySelector('span').innerText = '开关' + (event.detail.isActive ? '' : '');
		});
	});

</script>
</html>

